<template>
  <div class="goods-detail">
    <div class="goods-info">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/?type=1' }"
          >科目一</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/BuyCourse' }"
          >已购课程</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ goodsInfo.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="goods-details">
        <div class="goods-img">
          <img :src="goodsInfo.img" alt="" />
        </div>
        <div class="goods">
          <div class="goods-title">{{ goodsInfo.title }}</div>
          <div class="goods-time">
            <div class="goods-label">通关答案</div>
            <div class="sub-detail">有效期<span>终生享用</span></div>
            <div class="sub-detail">课时数<span>65课时</span></div>
            <div class="sub-detail">购买量<span>1488人</span></div>
          </div>
          <div class="down-print">
            <div class="down-item">
              <img src="../../assets/download.png" alt="" />
              <span>文档下载</span>
            </div>
            <div class="down-item">
              <img src="../../assets/print.png" alt="" />
              <span>文档打印</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course-list">
      <div class="list-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程目录" name="first">
            <div class="video-list">
              <div
                class="video-item"
                v-for="(item, index) in courseList"
                :key="index"
                @click="playVideo"
              >
                <div>
                  <img src="../../assets/play.png" alt="" />
                  <span class="class-hour">第{{ index + 1 }}课时</span>
                  <span>{{ item.name }}</span>
                </div>
                <div>立即观看</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="写真练习" name="second"
            ><div class="video-list">
              <div
                class="video-item"
                v-for="(item, index) in courseList"
                :key="index"
                @click="playVideo"
              >
                <div>
                  <span>{{ item.name }}</span>
                </div>
                <div>立即练习</div>
              </div>
            </div></el-tab-pane
          >
        </el-tabs>
        <!-- <div class="list-title"><span>视频内容</span></div> -->
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "BuyCourseDetail",
  data() {
    return {
      activeName: "first",
      dialogTableVisible: false,
      goodsInfo: {
        id: 8,
        title: "科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧",
        img: require("../../assets/keer.png"),
        time: "4",
        price: "180.00",
      },
      courseList: [
        {
          id: 1,
          name: "科二考试技巧1",
        },
        {
          id: 2,
          name: "科二考试技巧2",
        },
        {
          id: 3,
          name: "科二考试技巧3",
        },
        {
          id: 4,
          name: "科二考试技巧4",
        },
      ],
    };
  },
  created() {
    // this.goodsInfo = this.$route.query.item;
  },
  methods: {
    playVideo() {
      this.$confirm("请先购买课程，才可以播放", "", {
        confirmButtonText: "购买课程",
        cancelButtonText: "暂不购买",
        cancelButtonClass: "cancelButton",
        confirmButtonClass: "confirmButton",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "购买课程!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "暂不购买",
          });
        });
    },
  },
};
</script>
  
  <style lang="scss">
.el-tabs__item:hover {
  color: #2ac092;
}
.el-tabs__active-bar {
  background-color: #2ac092;
  height: 0.4vh;
  bottom: 0.5vh;
  left: 0.6vw;
  border-radius: 20px;
  width: 15% !important;
}
.el-tabs__item.is-active {
  color: #333 !important;
}
.el-tabs__item {
  padding: 1vh 2vw !important;
  height: auto !important;
  color: #666;
  font-size: 1vw;
}
.confirmButton {
  background-color: #fff !important;
  color: #2ac092 !important;
}
.cancelButton {
  background-color: #fff !important;
  color: #666666 !important;
}
.goods-detail {
  background-color: #f5f5f5;
  height: 89.3vh;

  .goods-info {
    padding: 1.5% 12.5%;
    background-color: #fff;

    .goods-details {
      display: flex;
      margin-top: 4vh;

      .goods-img {
        width: 17.2vw;
        height: 23.3vh;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 1.6vw;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .goods {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        width: 75%;

        .goods-title {
          font-size: 1vw;
          font-weight: bold;
        }

        .goods-time {
          margin: 2vh 0;
          font-size: 0.8vw;
          color: #999999;
          display: flex;

          .goods-label {
            font-size: 0.6vw;
            padding: 0.2vh 0.3vw;
            background-color: #defcf3;
            border-radius: 5px;
            border: 1px solid;
            color: #2ac092;
          }

          .sub-detail {
            margin-left: 2vw;

            > span {
              color: #333333;
              margin-left: 0.5vw;
            }
          }
        }

        .down-print {
          font-size: 1vw;
          color: #333;
          padding: 1% 0.5%;
          display: flex;

          .down-item {
            display: flex;
            align-items: center;
            margin-right: 1vw;
            cursor: pointer;
            user-select: none;

            > img {
              width: 1vw;
              height: 2vh;
              margin-right: 0.2vw;
            }
          }
        }
      }
    }
  }
}
.el-button {
  background: #2ac092;
  color: #fff;
}

.course-list {
  margin-top: 4vh;
  padding: 0 12.5%;

  .list-box {
    background-color: #fff;
    border-radius: 10px;

    .list-title {
      font-size: 1vw;
      padding: 3vh 2vw;

      > span {
        width: max-content;
        padding: 1.3vh 0;
        border-bottom: 2px solid #2ac092;
      }
    }

    .video-list {
      width: 95%;
      margin: 0 auto;
      //   border-top: 2px solid #e6e6e6;

      .video-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5% 0;
        width: 98%;
        margin: 0 auto;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
        font-size: 1vw;
        color: #333333;
        user-select: none;

        > div:nth-child(1) {
          display: flex;
          align-items: center;

          > img {
            margin-right: 0.2vw;
          }
        }
        > div:nth-child(2) {
          font-size: 0.8vw;
          color: #fff;
          background-color: #2ac092;
          padding: 0.5vh 1vw;
          border-radius: 20px;
        }
        .class-hour {
          font-size: 0.6vw;
          padding: 0.3vh 0.6vw;
          background: #defcf3;
          color: #2ac092;
          border: 1px solid;
          border-radius: 5px;
          margin: 0 0.5vw;
        }
      }

      .video-item:hover {
        color: #2ac092;
      }
    }
  }
}
</style>